<template>
    <div class="app-container">
        <el-form label-width="120px">
            <el-form-item label="幻灯片标题">
                <el-input v-model="bannerInfo.title" placeholder=""/>
            </el-form-item>
            <el-form-item label="幻灯片链接地址">
                <el-input v-model="bannerInfo.linkUrl" placeholder="如：/teacher"/>
            </el-form-item>
            <el-form-item label="排序">
            <el-input-number v-model="bannerInfo.sort" :min="0" controls-position="right"/>
            </el-form-item>

            <el-form-item label="幻灯片照片" width="220" height="220">

            <el-upload
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :action="BASE_API+'/eduoss/fileoss'"
                class="avatar-uploader">
                <img :src="bannerInfo.imageUrl" :width="450" :height="300">
            </el-upload>

        </el-form-item>

            
        <el-form-item>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>

<script>
import banner from '@/api/edu/banner'

export default {
    data(){
        return{
            // 添加的信息
            bannerInfo: {
                id:'',
                sort:'',
                linkUrl:'',
                title:'',
                imageUrl: "https://edu-115412.oss-cn-chengdu.aliyuncs.com/2022/09/22/531303b17cd64fe5a77d55555748431a01.jpg",
            },
            saveBtnDisabled:false,
            // 幻灯片id
            bannerId:'',
            BASE_API:process.env.VUE_APP_BASE_API,
            
        }
    },
    created(){
        // 如果有id的话
        // if(this.$route.params && this.$route.params.id){
        //     this.bannerId = this.$route.params.id
        //     this.getOneBanner()
        // } else {
        //     this.bannerInfo = {}
        //     this.bannerInfo.imageUrl="https://edu-115412.oss-cn-chengdu.aliyuncs.com/2022/09/22/531303b17cd64fe5a77d55555748431a01.jpg"
        // }
        this.init()

    },
    // 监听
    watch:{
        $route(to,from){ // 路由变化方式  方法就会执行
            this.init()
        }
    },
    methods:{
        init(){
            // 如果有id的话
            if(this.$route.params && this.$route.params.id){
                this.bannerId = this.$route.params.id
                this.getOneBanner()
            } else {
                // 没有的话就进行清空
                this.bannerInfo = {}
                this.bannerInfo.imageUrl="https://edu-115412.oss-cn-chengdu.aliyuncs.com/2022/09/22/531303b17cd64fe5a77d55555748431a01.jpg"
            }
        },
        // 数据回显方法
        getOneBanner(){
            banner.getBanner(this.bannerId).then(resp => {
                this.bannerInfo = resp.data.item
                console.log(this.bannerInfo)
            })
        },
        // 上传之前要调用的方法
        beforeAvatarUpload(file){
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },

        // 上传封面成功调用的方法成功
        handleAvatarSuccess(resp,file){
            // cover得到地址
            this.bannerInfo.imageUrl = resp.data.url
        },

        // 修改方法
        updatebanner(){
            banner.updateBanner(this.bannerInfo).then(resp => {
                this.$message({
                    type: 'success',
                    message: '修改幻灯片图片成功'
                    })
                // 进行路由的跳转
                this.$router.push({path:'/banner/table'})

            })
        },


        // 保存方法
        savebanner(){
            banner.addBanner(this.bannerInfo).then(resp => {
                this.$message({
                    type: 'success',
                    message: '添加幻灯片图片成功'
                    })
                // 进行路由的跳转
                this.$router.push({path:'/banner/table'})
            })
        },
        // 保存或者添加
        saveOrUpdate(){
            if(!this.bannerInfo.id){
                // 调用保存的方法
                this.savebanner()
            } else {
                // 调用修改的方法
                this.updatebanner()
            }
        }
    }
}
</script>